<template>
	<view :style="$store.state.skin">
		<view class="page">
			<!-- 整个主体部分（背景是图片）-strat -->
			<view class="uni-form-contentimage topic">
				<!-- 导航栏-start-->
				<view class="uni-form-nav">
					<view class="nav-content" v-for="(item, index) in NavigationBar" :key="index" @click="redirect(item)">
						<image :src="item.img" mode="widthFix" class="nav-image"></image>
						<view class="nav-text">
							{{ item.name }}
						</view>
					</view>
				</view>
				<!-- 导航栏-end -->

				<!-- 导航栏上面的插件-start -->
				<view class="uni-form-addon">
					<!-- 未登录-start -->
					<view class="addon-content" @click="addonChange()" v-if="addon === true">
						<view class="addon-text">登录查看账户资产和投资信息</view>
						<view class="addon-image">
							<!-- <image src="../../static/home_icon/home_icon_right.png" mode="/"></image> -->
						</view>
					</view>
					<!-- 未登录-end -->
					<!-- 已登录-start -->
					<view class="addon-content" @click="addonChange()" v-else>
						<view class="addon-texts">
							<view class="addon-texts-one">
								<view class="">
									{{ userinfo.total_assets || 0 }}
								</view>
								<view class="">总资产(元)</view>
							</view>
							<view class="addon-texts-one texts-two">
								<view class="">
									{{ userinfo.total_market_value || 0 }}
								</view>
								<view class="">持仓市值</view>
							</view>
						</view>
						<view class="addon-image">
							<!-- <image src="../../static/home_icon/home_icon_right.png" mode="/"></image> -->
						</view>
					</view>
					<!-- 已登录-end -->
				</view>
				<!-- 导航栏上面的插件-end -->

				<!-- 主体-包含轮播图等-start -->
				<view class="uni-form-main">
					<!-- 轮播图-start -->
					<view class="main-banner">
						<view class="uni-margin-wrap">
							<swiper class="main-swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration">
								<swiper-item v-for="(mainbanner, index) in mainBanner">
									<image :src="mainbanner.image" mode="scaleToFill" class="main-swiper"></image>
								</swiper-item>
							</swiper>
						</view>
					</view>
					<!-- 轮播图-end -->
					<!-- 主体股票信息栏-start -->
					<view class="main-message">
						<view class="message-content">
							<!-- 纵向滑动效果-start -->
							<view class="message-wrap">
								<swiper
									class="message-swiper disabled"
									@click="messageClick()"
									@change="messagechange"
									circular
									:autoplay="autoplay"
									:duration="duration"
									vertical="ture"
								>
									<swiper-item @click="messageClick()" v-for="(item, index) in stockExponent">
										<view class="message-swiper-item uni-bg-red" v-if="parseFloat(item.chg) < 0 ? (messagecolor = 'warpgreen') : (messagecolor = 'warpred')">
											<view>{{ item.name }}</view>
											<view class="swiper-style">
												<view :class="messagecolor">{{ item.price }}</view>
												<view :class="messagecolor">{{ item.turnover }}</view>
											</view>
											<view v-if="parseFloat(item.chg) < 0? (warpcolor = 'warpgreen'): (warpcolor = 'warpred')">
												<view :class="messagecolor">{{ item.chg }}<text :class="warpcolor"  style="font-size: 1.2rem;">{{ parseFloat(item.chg) < 0 ? '↓' : '↑' }}</text></view>
											</view>
										</view>
									</swiper-item>
								</swiper>
							</view>
							<!-- 纵向滑动效果-end -->
							<view class="message-text" v-if="parseFloat(randStock.zf) < 0 ? (colortext = 'warpgreen') : (colortext = 'warpred')">
								<view style="display: flex; align-items: center; justify-content: center">
									{{ randStock.name }}
									<!-- <text class="stock_code"> {{randStock.all_no}} </text> -->
								</view>
								<!-- <text class="stock_price" style="font-size: 1rem;"> {{randStock.price}} </text> -->
								<view v-if="parseFloat(randStock.zf) < 0 ? (text = '下跌') : (text = '上涨')">
									<text :class="colortext" style="font-size: 1rem">{{ randStock.price }}</text>
								</view>
								<view v-if="parseFloat(randStock.zf) < 0 ? (text = '下跌') : (text = '上涨')">
									<view>
										<text :class="colortext" style="font-size: 1rem">{{ randStock.zf }}</text>
										<text style="font-size: 1.2rem; display: inline-block; margin-top: -10rpx" :class="colortext">{{ text == '下跌' ? '↓' : '↑' }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<!-- 主体股票信息栏-end -->
				</view>
				<!-- 主体-包含轮播图等-end -->
			</view>
			<!-- 整个主体部分（背景是图片-end -->

			<!-- 文字滑动效果-start -->
			<view class="main-slide">
				<view class="iconfont icon-yangshengqi slide-image"></view>
				<view class="slide-wrap">
					<view class="slide-wrap-text" @click="warpchange()">
						{{ notice }}
					</view>
				</view>
			</view>
			<!-- 文字滑动效果end -->
			<!-- 三步投资-start -->
			<view class="uni-form-image" @click="imagechange()"></view>
			<!-- 三步投资-end -->

			<!-- 今日热点-start -->
			<view class="uni-form-hotspot">
				<view class="hotspot-title">
					<view class="hotspot-title-text">今日热点</view>
					<view class="hotspot-title-image" @click="redirect({ url: '/pages/market/market', tab: false })">
						行情中心
						<text>></text>
					</view>
				</view>
				<view class="hotspot-content">
					<view class="hotspot-content-top" v-for="(hotspottop, index) in hotspotTop" @click="hotspotchange(hotspottop)">
						<view class="">
							{{ hotspottop.name }}
						</view>
						<view :class="parseFloat(hotspottop.zf) < 0 ? 'warpgreen' : 'warpred'">
							{{ hotspottop.zf + '%' }}
						</view>
						<view class="top-color">热搜TOP{{ hotspottop.num }}</view>
					</view>
				</view>
			</view>
			<!-- 今日热点-end -->

			<!-- 热点资讯-start -->
			<view class="uni-form-inform">
				<view class="inform-title">
					<view class="inform-title-text">热点资讯</view>
					<view class="inform-title-image" @click="redirect({ url: '/pages/messageList/messageList', tab: false })">
						查看更多
						<text>></text>
					</view>
				</view>
				<view class="inform-content">
					<view class="inform-border" v-for="(informborder, index) in informBorder" @click="informchange(informborder.url)">
						<view class="infom-one">
							<view class="inform-content-text">
								<view class="inform-content-title">
									{{ informborder.title }}
								</view>
								<view class="inform-words">
									{{ informborder.description }}
								</view>
							</view>
							<view class="inform-time">
								{{ formatDate(informborder.ctime) }}
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 热点资讯-end -->

			<!-- 弹窗效果-start -->
			<Popup :Showhide="true"></Popup>
			<!-- 弹窗效果-end -->
		</view>
	</view>
</template>

<script>
import request from '@/api/request.js';
import webSocketMixin from '@/api/socket.js';
import { redirectTo } from '@/utils/util.js';
import Popup from '@/components/Popup/Popup.vue';
export default {
	mixins: [webSocketMixin],
	data() {
		return {
			NavigationBar: [
				{
					img: '../../static/home_icon/page_cicon02.png',
					name: '资产',
					url: '/pages/asset/asset',
					tab: true
				},
				{
					img: '../../static/home_icon/page_cicon03.png',
					name: '选股',
					url: '/pages/sousou/sousou',
					tab: false
				},
				{
					img: '../../static/home_icon/page_cicon04.png',
					name: '选购',
					url: '/pages/market/market?isActive=3',
					tab: false
				},
				{
					img: '../../static/home_icon/page_cicon05.png',
					name: '行情',
					url: '/pages/market/market',
					tab: false
				}
			],
			userinfo: {
				total_assets: 0.0,
				total_market_value: 0.0
			},
			mainBanner: [],
			// 证券指数
			stockExponent: [],
			randStock: {},
			notice: `公告：为了给您带来更优质的服务体验，平台系统现已升级完成，
					本次升级给您带来不便，我们深表歉意，同时感谢您的理解及配合
					（温馨提醒，为您提供汇款的托管账户已更新，之前汇款账户已全部结算清算完成并下架，
					请勿汇款至之前托管账户现账户只能用于您提交的本次汇款，超时请联系在线客服）`,
			addon: true, // 是否登录 true代表没有登录
			indicatorDots: true,
			autoplay: true,
			interval: 2000,
			duration: 500,
			hotspotTop: [],
			informBorder: [],
			socketTask: null,
			socketTask2: null
		};
	},
	components: {
		Popup
	},
	async onLoad() {
		// 是否登录
		let userData = uni.getStorageSync('userData');
		if (userData.token) {
			this.addon = false;
			console.log('有');
		} else {
			this.addon = true;
			console.log('没有');
		}
		// 轮播图的请求-start
		let slideshow = await request.get('/api/index/Banner');
		if (slideshow.code === 1) this.mainBanner = slideshow.data;
		// 股票指数（换为wss）
		// let stockExponent = await request.get('/api/index/stockExponent');
		// if (stockExponent.code === 1) {
		// 	console.log('？？？',stockExponent)
		// }
		// 热点资讯-start
		let hotMessage = await request.get('/api/index/getinformation?limit=3');
		if (hotMessage.code === 1) this.informBorder = hotMessage.data;
		// 热点资讯-end
	},
	async onShow() {
		// 设置导航栏颜色
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: this.$store.state.presentColor
		});
		let userData = uni.getStorageSync('userData');
		if (userData.token) {
			this.addon = false;
		} else {
			this.addon = true;
		}
		// 今日热点 长连接
		// 使用WebSocket协议-与后端进行连接-start
		this.socketTask = await this.handleConnectWebSocket('?type=index_hots');
		this.socketTask.onMessage((res) => {
			let data = JSON.parse(res.data);
			if (data.type && data.type === 'ping') {
				return;
			}
			this.hotspotTop = data.hot_stock_list;
			this.stockExponent = data.stock_exponent_list;
			this.randStock = data.random_hot_stock;
			this.notice = data.index_notice;
			// this.randStock = stockExponent.data.random_hot_stock;
			// if(Array.isArray(data)) {
			// this.hotspotTop = data;
			// }
		});
		// 登录了才请求
		if(userData.token){
			// 首页资产和持仓市值
			this.socketTask2 = await this.handleConnectWebSocket(`?type=asset&token=${userData.token}`);
			this.socketTask2.onMessage((res) => {
				let data = JSON.parse(res.data);
				if (data.type && data.type === 'ping') {
					return;
				}
				if (data.total_assets) {
					this.userinfo = data;
				}
			});
		}
	},
	onHide() {
		// 关闭连接
		if (this.socketTask && this.socketTask2) {
			this.socketTask.close();
			this.socketTask2.close();
		}
	},
	// 输入框点击跳转事件-start
	onNavigationBarSearchInputClicked() {
		uni.navigateTo({
			url: '/pages/sousou/sousou'
		});
	},
	onNavigationBarButtonTap(e) {
		// #ifdef H5
		console.log('走的h5页面');
		this.kfByH5();
		// #endif
		// APP： 打成app包的时候
		// #ifdef APP-PLUS
		console.log('走的app页面');
		this.kfByApp();
		// #endif
		// uni.navigateTo({
		// 	url: '/pages/customerService/customerService'
		// });
	},

	// 输入框点击跳转事件-end
	methods: {
		// 跳转
		redirect(item) {
			if (item.tab) {
				uni.switchTab({
					url: item.url
				});
			} else {
				uni.navigateTo({
					url: item.url
				});
			}
		},
		// 导航栏判断用户登录事件-start
		changenav(e) {
			let index = e;
			if (this.addon == true) {
				if (index == 3) {
					uni.navigateTo({
						url: `../market/market?addon=${this.addon}`
					});
				} else {
					uni.navigateTo({
						url: '../login/login'
					});
				}
			} else if (this.addon == false && index == 0) {
				uni.switchTab({
					url: '../asset/asset'
				});
			} else if (this.addon == false && index == 1) {
				uni.navigateTo({
					url: '../sousou/sousou'
				});
			} else if (this.addon == false && index == 2) {
				uni.switchTab({
					url: '../trade/trade'
				});
			} else if (this.addon == false && index == 3) {
				uni.navigateTo({
					url: `../market/market?addon=${this.addon}`
				});
			}
		},
		// 导航栏判断用户登录事件-end

		// 导航栏上面的插件-start
		addonChange(e) {
			// 登录了点击跳转到资产页面
			if (this.addon == true) {
				uni.navigateTo({
					url: '../login/login'
				});
			} else {
				uni.switchTab({
					url: '/pages/asset/asset'
				});
			}
		},
		// 导航栏上面的插件-end

		// 主体导航栏部分-start

		// mainnavchange(e) {
		// 	if (this.addon == true) {
		// 		uni.navigateTo({
		// 			url: "../login/login"
		// 		})
		// 	} else if (this.addon == false && e == 0) {
		// 		uni.navigateTo({
		// 			url: "../wangneng/wangneng"
		// 		})
		// 	} else if (this.addon == false && e == 1) {
		// 		uni.switchTab({
		// 			url: "/pages/trade/trade"
		// 		})
		// 	} else if (this.addon == false && e == 2) {
		// 		uni.navigateTo({
		// 			url: "../wangneng/wangneng"
		// 		})
		// 	}
		// },

		mainnavchange(e) {
			if (this.addon == true) {
				uni.navigateTo({
					url: '../login/login'
				});
			} else if (this.addon == false && e == 0) {
				uni.navigateTo({
					url: '../wangneng/wangneng'
				});
			} else if (this.addon == false && e == 1) {
				uni.navigateTo({
					url: '../wangneng/wangneng'
				});
			} else if (this.addon == false && e == 2) {
				uni.switchTab({
					url: '/pages/trade/trade'
				});
			} else if (this.addon == false && e == 3) {
				uni.navigateTo({
					url: '../wangneng/wangneng'
				});
			}
		},

		// 主体导航栏部分-end

		// 纵向滑动效果-start
		messagechange(data) {
			// 当前轮播的数据
			// console.log(this.stockExponent[data.detail.current]);
		},
		messageClick(item) {
			return;
			// 这个不需要考虑登录状态
			console.log('123S');
			uni.navigateTo({
				url: '../wangneng/wangneng?code=' + item.all_no
				//url: `../wangneng/wangneng?code=${data.numbering}`
			});
		},

		// 纵向滑动效果-end
		// 文字滑动效果-start
		warpchange() {
			// 点击跳转到公司公告部分
			uni.navigateTo({
				url: '../announcement/announcement'
			});
		},
		// 文字滑动效果-end

		// 中间的图片-start
		imagechange() {
			// 登录了调整到我的页面，未登录跳转到注册页面
			if (this.addon == false) {
				uni.switchTab({
					url: '/pages/mine/mine'
				});
			} else {
				uni.navigateTo({
					url: '/pages/register/register'
				});
			}
		},
		// 中间的图片-end

		// 今日热点-start
		hotspotchange(data) {
			uni.navigateTo({
				url: `/pages/wangneng/wangneng?code=${data.all_no}`
			});
		},
		// 今日热点-end

		// 热点资讯-start
		informchange(url) {
			let informurl = url;
			uni.navigateTo({
				url: `/pages/information/information?url=${informurl}`
			});
		},
		// 热点资讯-end
		// vue3的过滤器用法-start
		formatDate(value) {
			var time = new Date(value);
			var year = time.getFullYear(); // 年
			var month = time.getMonth() + 1 < 10 ? '0' + (time.getMonth() + 1) : time.getMonth() + 1; // 月
			var day = time.getDate() < 10 ? '0' + time.getDate() : time.getDate(); // 日
			var hours = time.getHours() < 10 ? '0' + time.getHours() : time.getHours(); // 时
			var minutes = time.getMinutes() < 10 ? '0' + time.getMinutes() : time.getMinutes(); // 分
			var seconds = time.getSeconds() < 10 ? '0' + time.getSeconds() : time.getSeconds(); // 秒
			return year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
		},
		// vue3的过滤器用法-end
		kfByApp() {
			// 首先需要通过 uni.requireNativePlugin("ModuleName") 获取 module
			var testModule = uni.requireNativePlugin('MeiQia-ChatPlugin');

			testModule.initChatViewManger();

			let _clientInfo = this.getMemberInfo();
			if (_clientInfo) {
				testModule.setClientInfo({
					clientInfo: _clientInfo,
					override: true
				});
			}

			testModule.showMeiQiaChatView();
		},
		kfByH5() {
			(function (m, ei, q, i, a, j, s) {
				m[i] =
					m[i] ||
					function () {
						(m[i].a = m[i].a || []).push(arguments);
					};
				(j = ei.createElement(q)), (s = ei.getElementsByTagName(q)[0]);
				j.async = true;
				j.charset = 'UTF-8';
				j.src = 'https://static.meiqia.com/dist/meiqia.js';
				s.parentNode.insertBefore(j, s);
			})(window, document, 'script', '_MEIQIA');
			_MEIQIA('entId', '430b9032c263fc9404214a3ce1bb8e6a');
			let _clientInfo = this.getMemberInfo();
			if (_clientInfo) {
				_MEIQIA('metadata', _clientInfo);
			}

			// 初始化成功后调用美洽 showPanel
			_MEIQIA('withoutBtn');
			_MEIQIA('allSet', function () {
				_MEIQIA('showPanel');
			});
			_MEIQIA('showPanel');
		},
		getMemberInfo() {
			//先读storage里面的信息
			let _memberInfo = {} || uni.getStorage('userData');
			if (_memberInfo) {
				return {
					address: '用户名：' + _memberInfo.username,
					weixin: '银行名称：' + _memberInfo.bank_name,
					name: _memberInfo.real_name,
					email: '昵称：' + _memberInfo.nickname,
					qq: '身份证号：' + _memberInfo.id_card,
					tel: _memberInfo.mobile,
					weibo: '银行卡号：' + _memberInfo.bank_num
				};
			}
			return [];
		}
	}
};
</script>

<style lang="scss" scoped>
@import url('@/static/iconfont/iconfont.css');
/* 搜索栏-start */
/* 搜索栏-end */

/* 最外层的主体部分-start */
.uni-form-contentimage {
	background-image: var(--index-bg);
	background-size: 100%;
	background-color: #fff;
	padding-top: 1.5rem;
}

/* 导航栏-start */
.uni-form-nav {
	display: flex;
}

.nav-content {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.nav-image {
	width: 50%;
}

.nav-text {
	color: #fff;
	font-size: 0.9rem;
}

/* 导航栏-end */

/* 导航栏上面的插件-start */
.uni-form-addon {
	position: relative;
	padding: 0.6rem 0.6rem 0 0.6rem;
	top: 1.5rem;
	z-index: 10;
}

.addon-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: var(--index-ds) !important;
	border-radius: 0.4rem;
	padding: 0.9rem 0.5rem 0.5rem 0.5rem;
	box-shadow: 0px 0px 5px 2px #ddd;
}

.addon-text {
	width: 100%;
	font-size: 0.9rem;
	line-height: 1.5rem;
}

.addon-image {
	width: 1.5rem;
	height: 1.5rem;
	background: var(--index-right) no-repeat;
	background-size: 100%;
}

.addon-texts {
	display: flex;
}
.addon-texts-one {
	margin-left: 0.5rem;
}
.addon-texts-one > view:nth-child(1) {
	font-size: 1rem !important;
	color: #343434 !important;
	padding: 0.5rem 0;
}
.texts-two {
	margin-left: 5.5rem !important;
}
/* 导航栏上面的插件-end */

/*主体-包含轮播图等-start */
.uni-form-main {
	padding-top: 2rem;
	background-color: #ffffff;
}

/* 轮播图-start */
.main-banner {
	padding: 0.5rem;
}

.main-swiper {
	width: 100%;
	height: 8.75rem;
	border-radius: 0.3rem;
}

/* 轮播图-end */

/* 主体导航栏-start */
.main-nav {
	width: 100%;
	padding: 0.5rem 0 1rem 0;
	display: flex;
	justify-content: space-around;
}

.main-nav-content {
	width: 20%;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.main-nav-content > image {
	width: 50%;
	padding: 0.5rem 0;
}

.main-nav-text {
	font-size: 0.9rem;
}

/* 主体导航栏-end */

/* 主体股票信息栏-start */
.main-message {
	padding: 0 0.5rem;
}

.main-message .stock_code {
	color: #999999 !important;
	font-size: 0.8rem !important;
	line-height: 1.5;
	margin-right: 5rpx;
}
.main-message .stock_price {
	color: #ff6161 !important;
}

.message-content {
	background-image: var(--index-szzs);
	background-size: 100% 100%;
}

/* 纵向滑动效果-start */
.message-wrap {
	padding: 20rpx;
	border-bottom: 1px solid var(--index-ds);
}

.message-swiper {
	height: 1.5rem;
}

.message-swiper-item {
	display: flex;
	font-size: 0.9rem;
}
.message-swiper-item > view {
	flex: 1;
	display: flex;
	justify-content: center;
}

.swiper-style {
	display: flex;
	margin-left: 0.5rem;
	line-height: 1.5rem;
}	

.swiper-style > view {
	margin-left: 0.5rem;
}

.disabled {
	pointer-events: none;
}

.message-text {
	display: flex;
	/* justify-content: space-between; */
	padding: 20rpx;
	align-items: center;
}
.message-text > view {
	width: 33.3%;
	text-align: center;
}

.message-text > view:nth-child(1) {
	font-size: 0.9rem;
	/* width: 0%; */
}

.message-text > view:nth-child(2) {
	font-size: 0.9rem;
}

/* 纵向滑动效果-end */

/* 文字滑动效果-start */
.main-slide {
	display: flex;
	align-items: center;
	background-color: #fff;
	overflow: hidden;
	padding: 0 0.6rem;
}

.slide-image {
	padding-right: 0.3rem;
	color: #f22525;
	font-size: 0.8rem;
	text-align: center;
	line-height: 2rem;
}

.slide-wrap {
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	font-size: 0.9rem;
	color: #282828;
}

.slide-wrap-text {
	position: relative;
	width: fit-content;
	animation: slide 30s linear infinite;
	padding-left: 1.5rem;
}

/* 定义滑动动画 */
@keyframes slide {
	0% {
		transform: translateX(0);
	}

	100% {
		transform: translateX(-100%);
	}
}

/* 文字滑动效果-end */

/* 主体股票信息栏-end */
/*主体-包含轮播图等-end */

/* 三步投资-start */
.uni-form-image {
	background-color: #f5f5f5 !important;
	margin: 0.5rem 0;
	height: 260rpx;
	background: var(--index-sbtz);
	background-size: 100%;
}

.uni-form-image > image {
	width: 100%;
	max-width: 100%;
	display: block;
}

/* 三步投资-end */

/* model视频播放-start */
.uni-form-model {
	background-color: #f5f5f5 !important;
	padding: 0 0 0.5rem 0;
}

.model-content {
	padding: 0.5rem;
	background-color: #ffffff;
}

#myVideo {
	width: 100%;
}

/* model视频播放-end */

/* 今日热点-start */
.uni-form-hotspot {
	padding: 0 0 0.5rem 0;
}

.hotspot-title {
	display: flex;
	justify-content: space-between;
	background-color: #ffffff;
	padding: 0 0.6rem;
}

.hotspot-title-text {
	color: #282828;
	line-height: 2.2rem;
	font-size: 1rem;
}

.hotspot-title-image {
	color: #b3b3b3;
	line-height: 2.2rem;
	font-size: 0.9rem;
}

.hotspot-content {
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-around;
	background-color: #ffffff;
}

.hotspot-content-top {
	width: 30%;
	border-radius: 0.3rem;
	background-color: #f5f5f5;
	margin: 0.5rem 0rem;
	font-size: 0.9rem;
}

.hotspot-content-top > view {
	text-align: center;
	line-height: 1.5rem;
}

.hotspot-content-top > view:nth-child(1) {
	text-align: center;
	padding-top: 0.5rem;
	font-size: 0.9rem !important;
}

.hotspot-content-top > view:nth-child(2) {
	text-align: center;
	padding-top: 0.5rem;
}

.top-color {
	font-size: 0.9rem;
	background-color: var(--nav-bg);
	border-radius: 0 0 0.3rem 0.3rem;
	color: #ffffff;
	margin-top: 0.55rem;
}

/* 今日热点-end */

/* 热点资讯-start */
.uni-form-inform {
	padding: 0 0 0.5rem 0;
}

.inform-title {
	display: flex;
	justify-content: space-between;
	background-color: #ffffff;
	padding: 0 0.6rem;
	border-bottom: 1px solid #ddd;
}

.inform-title-text {
	width: 33%;
	color: #282828;
	line-height: 2.2rem;
	font-size: 1rem;
}

.inform-title-image {
	color: #b3b3b3;
	line-height: 2.2rem;
	font-size: 0.9rem;
}

.inform-content {
	background-color: #ffffff;
}

.inform-border {
	border-bottom: 1px solid #ddd;
}

.infom-one {
	padding-left: 0.75rem;
}

.inform-content-title {
	line-height: 1.5rem;
	max-width: 100%;
}

.inform-words {
	font-size: 0.9rem;
	color: #757575;
	display: -webkit-box;
	overflow: hidden;
	text-overflow: ellipsis;
	word-wrap: break-word;
	word-break: break-all;
	white-space: normal !important;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.inform-time {
	font-size: 0.9rem;
	padding: 0.5rem 0;
	color: #757575;
}

.inform-content-text {
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

/* 热点资讯-end */

.warpgreen {
	color: #01a860;
}
.warpred {
	color: var(--nav-bg);
}
</style>
